<template>
  <div id="app">
    <div class="header" @click="judgeApp($event)">
      <span><router-link to="/">主应用</router-link></span>
      <span><router-link to="/mapbox-test">mapbox</router-link></span>
      <span><router-link to="/maptalks-test">maptalks</router-link></span>
    </div>
    <div class="main">
      <router-view v-show="isMain"/>
      <div id="sub-app"></div>
    </div>
  </div>
</template>
<script>
import registerApps from "@/qiankun";

export default {
  data() {
    return {
      isMain: true
    }
  },
  mounted() {
    if (process.env.VUE_APP_QIANKUN === 'true') {
      // qiankun 注册子应用
      if (!window.qiankunStarted) {
        window.qiankunStarted = true;
        registerApps();
      }
    }
  },
  methods: {
    judgeApp(e) {
      this.isMain = e.target.baseURI === 'http://localhost:9999/'
    }
  }
}
</script>
<style lang="stylus">
@import "~@/common/css/common.style.styl"
@import "~@/common/css/custome.style.styl"
#app
  width 100%
  height 100%
  font-size 14px
  font-family "Avenir", Helvetica, Arial, sans-serif
  -webkit-font-smoothing antialiased
  -moz-osx-font-smoothing grayscale
  text-align center
  color #2c3e50
  overflow hidden
  .header
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    span
      margin: 0 10px;
      font-size: 18px;
  .main
    height calc(100% - 40px)
    #sub-app
      height: 100%
      & > div
        height 100%
</style>
